<template>
	<view class="container">
		<div :style="{
	  	height:`${statusBarHeight}px`,
	  	background:'#2f9aff'
	  }"></div>
		<view :style="{height: `${topHeight}px`,paddingLeft:`${pagePadding}px`,paddingRight:`${pagePadding}px`}">
			<view class="personal-title">
				<i class="clearIcon" @click="goBack"></i>
				<text>常见问题</text>
			</view>
		</view>
		<!-- 搜索框 -->
		<view class="search-box">
			<input type="text" v-model="searchText" placeholder="我能帮到您什么？在这查找答案" class="search-input" />
			<button class="search-btn" @click="handleSearch">搜索</button>
		</view>

		<!-- 帮助中心标题 -->
		<view class="help-title">帮助中心</view>

		<!-- 折叠面板列表 -->
		<view class="collapse-list">
			<!-- 开始使用 -->
			<view class="collapse-item" @click="togglePanel('start')">
				<view class="collapse-header">
					<text>开始使用</text>
					<text class="arrow" :class="{ 'arrow-down': activePanel === 'start' }">></text>
				</view>
				<view v-if="activePanel === 'start'" class="collapse-content">
					<text>这里是开始使用的详细说明内容</text>
				</view>
			</view>

			<!-- 使用说明 -->
			<view class="collapse-item" @click="togglePanel('guide')">
				<view class="collapse-header">
					<text>使用说明</text>
					<text class="arrow" :class="{ 'arrow-down': activePanel === 'guide' }">></text>
				</view>
				<view v-if="activePanel === 'guide'" class="collapse-content">
					<text>这里是使用说明的详细内容</text>
				</view>
			</view>

			<!-- 产品介绍 -->
			<view class="collapse-item" @click="togglePanel('product')">
				<view class="collapse-header">
					<text>产品介绍</text>
					<text class="arrow" :class="{ 'arrow-down': activePanel === 'product' }">></text>
				</view>
				<view v-if="activePanel === 'product'" class="collapse-content">
					<text>这里是产品介绍的详细内容</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
	});
	// 搜索框内容
	const searchText = ref('')

	// 当前激活的面板
	const activePanel = ref('')

	// 搜索处理函数
	const handleSearch = () => {
		// 实现搜索逻辑
		console.log('搜索内容：', searchText.value)
	}

	// 切换面板显示状态
	const togglePanel = (panelName) => {
		activePanel.value = activePanel.value === panelName ? '' : panelName
	}
	// 处理页面跳转
	const goBack = (type) => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.personal-title {
		height: 100%;
		font-size: 38rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.clearIcon {
			position: absolute;
			height: 100%;
			width: 60rpx;
			background: url(/static/images/my/ic_fanhui@2x.png)no-repeat center;
			background-size: 35%;
			left: 0;
			top: 0;
		}
	}

	.container {
		// padding: 32rpx;
		background-color: #f7f7f7;
	}

	.feedback-container {
		min-height: 100vh;
		background-color: #F7F7F7;
		padding: 0;
	}

	.search-box {
		display: flex;
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.search-input {
		flex: 1;
		height: 72rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		margin-right: 24rpx;
	}

	.search-btn {
		width: 160rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background-color: #07c160;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.help-title {
		font-size: 36rpx;
		font-weight: 500;
		padding: 32rpx;
		color: #333;
	}

	.collapse-list {
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.collapse-item {
		border-bottom: 2rpx solid #eee;
	}

	.collapse-item:last-child {
		border-bottom: none;
	}

	.collapse-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
	}

	.collapse-header text {
		font-size: 30rpx;
		color: #333;
	}

	.arrow {
		color: #999;
		font-size: 24rpx;
		transition: transform 0.3s;
	}

	.arrow-down {
		transform: rotate(90deg);
	}

	.collapse-content {
		padding: 24rpx 32rpx;
		background-color: #f8f8f8;
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
</style>